<template>
  <div>
    <el-table :data="students" border style="width: 100%;height: 380px;">
      <!-- extend:可拖动 -->
            <el-table-column type="expand"> 
                <template #default="props">
                    <div style="padding: 20px;">
                        <p>学生姓名: {{ props.row.name }}</p>
                        <p>性别: {{ dataFilter(props.row.gender,genderOptions) }}</p>
                        <p>所在学校: {{ props.row.school }}</p>
                        <p>专业: {{ props.row.major }}</p>
                        <p>年级: {{ dataFilter(props.row.grade,gradeOptions) }}</p>
                        <p>学历: {{ dataFilter(props.row.education,educationOptions) }}</p>
                        <p>学习方向: {{ dataFilter(props.row.direction,directionOptions) }}</p>
                        <p>身份证号码: {{ props.row.id_number }}</p>
                        <p>电话号码: {{ props.row.phone }}</p>
                        <p>家长姓名: {{ props.row.parent }}</p>
                        <p>家长联系电话: {{ props.row.parent_phone }}</p>
                        <p>家庭住址: {{ props.row.address }}</p>
                        <p>QQ号码: {{ props.row.qq }}</p>
                        <p>所在班级: {{ classFilter(props.row.class,classOptions) }}</p>
                        <p>入学时间: {{ props.row.admission_date }}</p>
                        <p>授课教师: {{ dataFilter(props.row.teacher_id,teacherOptions) }}</p>
                        <p>学管: {{ dataFilter(props.row.manager_id,managerOptions) }}</p>
                        <p>照片:
                        <el-image v-for="(item,index) in  props.row.pictures" 
                        :key="index" 
                        style="width: 200px; height: 200px" 
                        :src="baseApi +'/upload/' + item"  
                        :max-scale="7"
                        :min-scale="0.2" 
                        :preview-src-list="getSrcList(props.row.pictures)" 
                        :initial-index="0" 
                        fit="cover" />
                        </p>
                        <p>备注信息: <span v-html="props.row.note"></span></p>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="序号" type="index" width="80px" />
            <el-table-column label="学生姓名" prop="name" width="100px"/>
            <el-table-column label="性别" prop="gender" width="100px">
                <template #default="scope">
                    {{ dataFilter(scope.row.gender,genderOptions) }}
                </template>

            </el-table-column>
            <el-table-column label="学习方向" prop="direction" >
                <template #default="scope">
                    {{ dataFilter(scope.row.direction,directionOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="电话号码" prop="phone" />
            <el-table-column label="所在班级" prop="class" >
                <template #default="scope">
                    {{ classFilter(scope.row.class,classOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="授课教师" prop="teacher_id" >
                <template #default="scope">
                    {{ dataFilter(scope.row.teacher_id,teacherOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="学管" prop="manager_id" >
                <template #default="scope">
                    {{ dataFilter(scope.row.manager_id,managerOptions) }}
                </template>
            </el-table-column>
            <el-table-column label="入学时间" prop="admission_date" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row._id)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(scope.row._id)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[5, 10, 15, 20]"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
            @current-change="handleCurrentChange" />
        <!-- 条件查询 -->
    <el-form
      :inline="true"
      :model="searchMap"
      style="margin: 20px"
      ref="searchFormRef"
    >
      <el-form-item prop="name">
        <el-input
          v-model="searchMap.name"
          placeholder="根据姓名查询"
        ></el-input>
      </el-form-item>
      <el-form-item prop="direction">
        <el-select v-model="searchMap.direction" placeholder="根据学习方向查询">
          <el-option
            v-for="option in directionOptions"
            :key="option._id"
            :label="option.name"
            :value="option._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="class">
        <el-select v-model="searchMap.class" placeholder="根据所在班级查询">
          <el-option
            v-for="option in classOptions"
            :key="option._id"
            :label="option.name"
            :value="option._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="teacher_id">
        <el-select
          v-model="searchMap.teacher_id"
          placeholder="根据授课教师查询"
        >
          <el-option
            v-for="option in teacherOptions"
            :key="option._id"
            :label="option.name"
            :value="option._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="manager_id">
        <el-select v-model="searchMap.manager_id" placeholder="根据学管查询">
          <el-option
            v-for="option in managerOptions"
            :key="option._id"
            :label="option.name"
            :value="option._id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchData">查询</el-button>
        <el-button type="primary" @click="handleAdd">添加</el-button>
        <el-button @click="resetForm(searchFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance, FormRules } from 'element-plus';
import { ElMessageBox, ElMessage } from 'element-plus'
import { onMounted,ref,reactive, } from 'vue';
/** 仓库引入 */
import useStudentStore from '@/store/modules/student';
const studentStore=useStudentStore()
import useUserStore from '@/store/modules/user';
const userStore=useUserStore()
import useRoleStore from '@/store/modules/role';
const roleStore=useRoleStore()
import useClassStore from '@/store/modules/class';
const classStore=useClassStore()
/** 类型引入 */
import type { studentInfoData } from '@/api/student/type';
import type { userInfoData } from '@/api/user/type'; 
import type { roleInfoData } from '@/api/role/type';
import type { classInfoData } from '@/api/class/type';
  // 查询项类型
  interface FilterData{
    _id:string,
    name:string
  }
/** 数据列表定义 */
let roleOptions = ref<roleInfoData[] | undefined>([])
let userOptions = ref<userInfoData[] | undefined>([])
let classOptions = ref<classInfoData[] | undefined>([])
const teacher_role_id = ref<string | undefined>("")
const manager_role_id = ref<string | undefined>("")
const teacherOptions = ref<userInfoData[]>([])
const managerOptions = ref<userInfoData[]>([])
  //学生列表
  let students = ref<studentInfoData[] | undefined>([])
  // 性别数据列表
  let genderOptions = ref<FilterData[]>([
      { _id: '0', name: '男' },
      { _id: '1', name: '女' },
  ])
  // 年级数据列表
  let gradeOptions = ref<FilterData[]>([
      { _id: '1', name: '大一' },
      { _id: '2', name: '大二' },
      { _id: '3', name: '大三' },
      { _id: '4', name: '大四' },
      { _id: '5', name: '在读研究生' },
  ])
  // 学历数据列表
  let educationOptions = ref<FilterData[]>([
      { _id: '1', name: '专科' },
      { _id: '2', name: '本科' },
      { _id: '3', name: '硕士' },
      { _id: '4', name: '社会' },
  ])
  // 学习方向数据列表
  let directionOptions = ref<FilterData[]>([
      { _id: '1', name: 'web前端' },
      { _id: '2', name: 'Java' },
      { _id: '3', name: 'C/C++' },
      { _id: '4', name: '少儿编程' },
      { _id: '5', name: '产品经理' },
  ])
/** 过滤 */
  // 过滤目标数据
  const dataFilter =(_id:string,options:any)=>{
    const obj= options?.find(item=>item._id ==_id)
    return obj?obj.name:''
  }
  // 过滤班级数据
  const classFilter =(_id:string,options:any)=>{
    const obj =options?.find(item =>item._id ==_id)
    return obj?obj.classname:''
  }

/** 数据列表获取 */
  // 学生列表
const getStudentList=()=>{
  studentStore.getStudentList({page: currentPage.value, size: pageSize.value,searchMap}).then(response=>{
    students.value=studentStore.students
    total.value=response?.total
  })
}
  // 角色列表
const getRoleList = () => {
  // 仓库是否有数据
  if (roleStore.roles?.length) {
    // 读仓库获取
    roleOptions.value = roleStore.roles
    roleOptions.value?.forEach((item) => {
      if (item.name == "教师") {
        teacher_role_id.value = item._id
      } else if (item.name == "学管") {
        manager_role_id.value = item._id
      }
    })
  } else {
    // 请求获取
    roleStore.roleList().then(() => {
      roleOptions.value = roleStore.roles
      roleOptions.value?.forEach((item) => {
        if (item.name == "教师") {
          teacher_role_id.value = item._id
        } else if (item.name == "学管") {
          manager_role_id.value = item._id
        }
      })
    })
  }
}
 // 用户列表
const getUserList = () => {
  if (userStore.users?.length) {
    // 读仓库获取
    userOptions.value = userStore.users
    userOptions.value?.forEach((item) => {
      if (item.role_id == teacher_role_id.value) {
        teacherOptions.value.push(item)
      } else if (item.role_id == manager_role_id.value) {
        managerOptions.value.push(item)
      }
    })
  } else {
    // 请求获取
    userStore.getUserAll().then(() => {
      userOptions.value = userStore.users
      userOptions.value?.forEach((item) => {
        if (item.role_id == teacher_role_id.value) {
          teacherOptions.value.push(item)
        } else if (item.role_id == manager_role_id.value) {
          managerOptions.value.push(item)
        }
      })
    })
  }
}
 // 班级列表
const getClassList = () => {
  if(classStore.classes?.length){
    classOptions.value=classStore.classes
  }else{
    classStore.getClassAll().then(()=>{
    classOptions.value=classStore.classes
    }).catch()
  }
}

/** 学生事件操作 */
  // 修改跳转页面
const handleEdit=(_id:string)=>{
  $router.push(`/student/update/${_id}`)
}
  // 删除
const handleDelete=(_id:string)=>{
  ElMessageBox.confirm(
    "确定删除么？",
    "waring",
    {
      confirmButtonText:"ok",
      cancelButtonText:"Cancel",
      type:"warning",
    }
  ).then(()=>{
    studentStore.deleteStudent(_id).then(response=>{
      getStudentList()
      ElMessage({
        type:"success",
        message:"删除成功"
      })
    })
  }).catch()
}
/**添加!!跳转新页面执行*/
import { useRouter } from 'vue-router';
let $router=useRouter()
  const handleAdd=()=>{
    $router.push(`/student/update/-1`)
  }

/** 查询 */
  //查询条件项
const searchMap=reactive({
  name:'',
  direction:"",
  teacher_id:"",
  manager_id:"",
  class:""
}) 
  // 获取查询表单
const searchFormRef=ref<FormInstance>()
  // 重置查询
const resetForm = (formEl:FormInstance|undefined)=>{
  if(!formEl) return;
  formEl.resetFields()
}
  // 查询确定
const searchData=()=>{
  currentPage.value=1
  getStudentList()
}



/** 页码操作 */
// 当前页
const currentPage = ref(1)
// 单页条数
const pageSize = ref(5)
// 总条数
const total = ref(0)
// 总页数
const totalPage = ref(1)
// 单页条数变动触发
const handleSizeChange = (val: number) => {
  pageSize.value = val;
  getStudentList()
}
// 当前页变动触发
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getStudentList()
}
/** 执行 */
onMounted(()=>{
  getStudentList()
  getRoleList()
  getUserList()
  getClassList()
})

const baseUrl = import.meta.env.VITE_APP_SERVICE_URL
const baseApi = import.meta.env.VITE_APP_BASE_API
// 预览大图
const getSrcList=(imgList:string[])=>{
  return imgList.map(item=>baseApi+ '/upload/' + item)
}
</script>

<style>

</style>